<template>
  <el-dialog
    title="查看详情"
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="dialogProcessDetailVisibleInChild"
    fullscreen
  >
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="过程意见" name="comments">
        <el-table
          v-loading="commentLoading"
          :data="comments"
          size="small"
          style="width: 100%; margin-bottom: 15px"
        >
          <el-table-column prop="taskName" label="任务节点" />
          <el-table-column prop="typeDesc" label="操作类型" />
          <el-table-column prop="userName" label="参与人" />
          <el-table-column prop="time" label="时间">
            <template slot-scope="scope">
              <span>{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fullMessage" label="意见" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="流程表单" name="processIntanceForm">
        <div v-if="generateStartFormVisible">
          <fm-generate-form
            ref="generateStartForm"
            :data="startFormJson"
            :value="variables"
          />
        </div>
        <el-form v-if="showBusinessKey" label-width="100px">
          <el-form-item label="业务主键Key:">
            <el-input v-model="businessKey" disabled />
          </el-form-item>
        </el-form>
        <div v-if="!generateStartFormVisible && !showBusinessKey">无</div>
      </el-tab-pane>
      <el-tab-pane label="流程图" name="processIntanceImage">
        <el-scrollbar>
          <img :src="imagePath" alt="流程图">
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script>
import crud from '@/mixins/crud'
import { comments, form, image } from '@/api/flowable/instance'

export default {
  name: 'ProcessDetail',
  components: {},
  mixins: [crud],
  props: {
    visible: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    processInstanceId: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      activeName: 'comments',
      commentLoading: false,
      comments: [],
      imagePath: '',
      isShowProcessInstanceForm: false,
      generateStartFormVisible: false,
      startFormJson: undefined,
      variables: undefined,
      showBusinessKey: false,
      businessKey: undefined
    }
  },
  computed: {
    dialogProcessDetailVisibleInChild: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
      this.commentLoading = true
      comments(this.processInstanceId).then(res => {
        this.comments = res
        this.commentLoading = false
      })
    })
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === 'processIntanceForm') {
        this.showProcessInstanceForm()
      } else if (tab.name === 'processIntanceImage') {
        this.showImage()
      }
    },
    showProcessInstanceForm() {
      if (!this.isShowProcessInstanceForm) {
        form(this.processInstanceId).then(res => {
          const data = res
          this.showBusinessKey = data.showBusinessKey
          this.businessKey = data.businessKey
          if (data && data.renderedStartForm) {
            this.startFormJson = JSON.parse(data.renderedStartForm)
            this.variables = JSON.parse(data.variables.processInstanceFormData)
            this.generateStartFormVisible = true
          }
          this.isShowProcessInstanceForm = true
        })
      }
    },
    showImage() {
      if (!this.imagePath) {
        image(this.processInstanceId).then(res => {
          this.imagePath = 'data:image/png;base64,' + res
        }).catch(err => {
          console.log('error:' + err.response.data.message)
        })
      }
    }
  }
}
</script>
